<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="dataTreeBase" src="../dataTreeBase.xml"/>

		<d:element name="dataTree" extends="b:dataTreeBase">
			

			<d:resource type="text/css"><![CDATA[.btl-dataTree {
	position: relative;
	overflow: auto;
	height: 100%;
	width: 100%;
	background-color: #FFF;
	-moz-outline: none;
}
.btl-dataTree * {
	zoom: 1.0;/* Fix to prevent bug 8493. Also solves a problem with onclick */
}
.btl-dataTree-focusElement {
	position: absolute;
	left: 0;
	top: 0;
}
.btl-dataTreeBranch-content {
	padding-left: 17px;
	/*zoom: normal; /* fix for bug 5948 that can not be used due to causing bug 8493 */
}
.btl-dataTree-rtl .btl-dataTreeBranch-content {
	padding-left: 0;
	padding-right: 17px;
}
.btl-dataTreeBranch-div,
.btl-dataTreeLeaf,
.btl-dataTreeBranch-div *,
.btl-dataTreeLeaf * {
	cursor: pointer;
}
.btl-dataTreeBranch-closed .btl-dataTreeItem,
.btl-dataTreeBranch-closed .btl-dataTreeBranch-content,
.btl-dataTreeBranch-empty .btl-dataTreeBranch-content {
	display: none;
	visibility: hidden;
}
.btl-dataTree-label-container {
	font-size: 100%;
	line-height: 130%;
}
.btl-dataTree-rtl .btl-dataTree-label-container {
	direction: rtl;
	unicode-bidi: bidi-override;
}
.btl-dataTreeBranch-div {
	background-repeat: no-repeat;
	padding-left: 16px;
	position: relative;
}
.btl-dataTree-rtl .btl-dataTreeBranch-div {
	padding-left: 0;
	padding-right: 18px;
}
.btl-dataTree-label {
	padding: 1px 3px;
	/* white-space: nowrap; would have been nice here, but it causes IE to render the containing box incorrectly */
}
.btl-dataTree-focus .btl-dataTreeItem-focus .btl-dataTree-focusIndicator {
	border: 1px dotted black;
	padding: 0 2px;
}
.btl-disabled .btl-dataTree-label {
	color: #AAA;
}
.btl-disabled .btl-chameleon-highlightBackground {
	color: #AAA;
	background-color: #DDD;
}
.btl-dataTreeBranch-div {
	background-position: 0 center;
}
.btl-dataTree-rtl .btl-dataTreeBranch-div {
	background-position: right center;
}
.btl-dataTreeBranch-open .btl-dataTreeBranch-div {
	background-image: url(media/treeBranchOpen.png);
}
.btl-dataTreeBranch-closed .btl-dataTreeBranch-div {
	background-image: url(media/treeBranchClosed.png);
}
.btl-dataTreeBranch-empty .btl-dataTreeBranch-div {
	background-image: url(media/treeBranchEmpty.png);
}
.btl-dataTree-rtl .btl-dataTreeBranch-closed .btl-dataTreeBranch-div {
	background-image: url(media/rtlTreeBranchClosed.png);
}
.btl-dataTreeLeaf .btl-dataTree-label-container {
	background-repeat: no-repeat;
	background-image: url(media/treeLeaf.png);
	background-position: 0 center;
	padding-left: 18px;
}
.btl-dataTree-rtl .btl-dataTreeLeaf .btl-dataTree-label-container {
	background-position: right center;
	padding-left: 0;
	padding-right: 13px;
}]]></d:resource>

			<d:resource type="image/png" src="media/treeLeaf.png"/>
			<d:resource type="image/png" src="media/treeBranchOpen.png"/>
			<d:resource type="image/png" src="media/treeBranchClosed.png"/>
			<d:resource type="image/png" src="media/treeBranchEmpty.png"/>
			<d:resource type="image/png" src="media/rtlTreeBranchClosed.png"/>

			<d:resource name="data-template" type="application/xml"><![CDATA[
				]]><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

					<!-- set output method -->
					<xsl:output method="html" indent="no"/>

					<xsl:param name="currentFocusId"/>

					<xsl:template match="/">
						<xsl:apply-templates select="*"/>
					</xsl:template>

					<xsl:template match="tree">
						<!-- Don’t know why this div is necessary, aren’t we transforming to a documentFragment? -->
						<div>
							<xsl:apply-templates select="item"/>
						</div>
					</xsl:template>

					<!-- tree branch -->
					<xsl:template match="item[@branch]">
						<div>
							<xsl:attribute name="btl_data-id"><xsl:value-of select="@id"/></xsl:attribute>
							<xsl:attribute name="class">
								<xsl:text>btl-dataTreeItem btl-dataTreeBranch</xsl:text>
								<xsl:choose>
									<xsl:when test="@empty = 'true'"> btl-dataTreeBranch-empty</xsl:when>
									<xsl:when test="@open = 'true'"> btl-dataTreeBranch-open</xsl:when>
									<xsl:otherwise> btl-dataTreeBranch-closed</xsl:otherwise>
								</xsl:choose>
							</xsl:attribute>
							<div class="btl-dataTree-line-vertical">
								<xsl:if test="$currentFocusId = @id">
									<xsl:attribute name="class">btl-dataTree-line-vertical btl-dataTreeItem-focus</xsl:attribute>
								</xsl:if>
								<xsl:call-template name="focusFinder"/>
								<div>
									<div class="btl-dataTree-line-horizontal">
										<div class="btl-dataTreeBranch-div btl-dataTree-toggleOpenClose">
											<xsl:choose>
												<xsl:when test="@empty = 'true' and string(iconEmpty)">
													<xsl:attribute name="style">background-image: url(<xsl:value-of select="iconEmpty"/>)</xsl:attribute>
												</xsl:when>
												<xsl:when test="@open = 'true' and string(iconOpen)">
													<xsl:attribute name="style">background-image: url(<xsl:value-of select="iconOpen"/>)</xsl:attribute>
												</xsl:when>
												<xsl:when test="string(icon)">
													<xsl:attribute name="style">background-image: url(<xsl:value-of select="icon"/>)</xsl:attribute>
												</xsl:when>
											</xsl:choose>
											<div class="btl-dataTree-label-container btl-dataTree-selectAndToggle">
												<span>
													<xsl:attribute name="class">
														<xsl:text>btl-dataTree-label btl-dataTree-focusIndicator</xsl:text>
														<xsl:if test="@selected = 'true'"> btl-chameleon-highlightBackground btl-chameleon-highlightText</xsl:if>
													</xsl:attribute>
													<xsl:value-of select="name"/>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<xsl:if test="@open = 'true'">
								<div class="btl-dataTreeBranch-content btl-dataTree-line-vertical">
									<xsl:apply-templates select="item"/>
								</div>
							</xsl:if>
							<input type="hidden"/><!-- marker to find btl_data-id objects -->
						</div>
					</xsl:template>

					<!-- tree leaf -->
					<xsl:template match="item">
						<div class="btl-dataTreeItem btl-dataTreeLeaf">
							<xsl:attribute name="btl_data-id"><xsl:value-of select="@id"/></xsl:attribute>
							<div>
								<xsl:attribute name="class">
									<xsl:text>btl-dataTree-label-container btl-dataTree-selectAndToggle</xsl:text>
									<xsl:if test="$currentFocusId = @id"> btl-dataTreeItem-focus</xsl:if>
								</xsl:attribute>
								<xsl:if test="string(icon)">
									<xsl:attribute name="style">background-image: url(<xsl:value-of select="icon"/>)</xsl:attribute>
								</xsl:if>
								<xsl:call-template name="focusFinder"/>
								<span>
									<xsl:attribute name="class">
										<xsl:text>btl-dataTree-label btl-dataTree-focusIndicator</xsl:text>
										<xsl:if test="@selected = 'true'"> btl-chameleon-highlightBackground btl-chameleon-highlightText</xsl:if>
									</xsl:attribute>
									<xsl:value-of select="name"/>
								</span>
							</div>
							<input type="hidden"/><!-- marker to find btl_data-id objects -->
						</div>
					</xsl:template>

					<xsl:template name="focusFinder">
						<xsl:if test="$currentFocusId = @id">
							<input type="hidden" id="btl_dataTree_focusFinder"/>
						</xsl:if>
					</xsl:template>
				</xsl:stylesheet><![CDATA[
			]]></d:resource>

			<d:method name="repaint">
				<d:argument name="records"/>
				<d:body type="text/javascript"><![CDATA[
					if (!records) {
						this.callSuper('repaint', [records]);
					} else {
						var oXProc = this.getProperty('xsltProcessor');
						for (var i = 0, len = records.length; i < len; i++)	{
							var oInstanceNode = this.getInstanceNode(records[i]),
								oViewNode = this.getViewNode(records[i]);
							if (oInstanceNode && oViewNode) {
								var oFragment = oXProc.transformToFragment(oInstanceNode, document);
								oViewNode.parentNode.replaceChild(oFragment, oViewNode);
							}
						}
					}
					// update focusedNode property
					var focusFinder = document.getElementById('btl_dataTree_focusFinder');
					var focusedNode = focusFinder ? focusFinder.parentNode : null;
					if (focusedNode)
						focusedNode.removeChild(focusFinder);
					this.setProperty('focusedNode', focusedNode);
				]]></d:body>
			</d:method>

			<d:method name="getViewNode">
				
				<d:argument name="identifier">
					
				</d:argument>
				<d:body type="text/javascript"><![CDATA[
					var aNodes = this.viewNode.getElementsByTagName('input');
					for (var i=1, len=aNodes.length; i < len; i++) {
						var oParent = aNodes[i].parentNode;
						if (oParent.getAttribute('btl_data-id') == identifier)
							return oParent;
					}
					return null;
				]]></d:body>
			</d:method>

			<d:property name="xsltProcessor">
				<!-- return a prepared XSLTProcessor object -->
				<d:getter type="text/javascript"><![CDATA[
					if (!this._._xsltProcessor) {
						this._._xsltProcessor = new XSLTProcessor();
						this._._xsltProcessor.importStylesheet(bb.getResource(this, 'data-template'));
					}
					var sCurrentFocusId = this.getProperty('focusedId');
					this._._xsltProcessor.setParameter(null, 'currentFocusId', sCurrentFocusId || '');
					return this._._xsltProcessor;
				]]></d:getter>
			</d:property>

			<d:method name="setFocusedNode">
				<!-- this method exists because we can’t call super properties... -->
				
				<d:argument name="oldNode"/>
				<d:argument name="newNode"/>
				<d:body type="text/javascript"><![CDATA[
					if (oldNode)
						bb.html.removeClass(oldNode, 'btl-dataTreeItem-focus');
					if (newNode) {
						bb.html.addClass(newNode, 'btl-dataTreeItem-focus');
						bb.html.scrollIntoView(newNode);
					}
				]]></d:body>
			</d:method>

			<d:template type="application/xhtml+xml">
				<div class="btl-dataTree btl-chameleon-normalText" tabindex="-1"><input class="btl-invisibleFocusInput btl-dataTree-focusElement" onbeforedeactivate="if(this.parentNode.controller.__focused){return false;}" readonly="readonly"/><div><d:content/></div></div>
			</d:template>

			<d:handler event="focus" type="text/javascript"><![CDATA[
				bb.html.addClass(this.viewNode, 'btl-dataTree-focus');
			]]></d:handler>

			<d:handler event="blur" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-dataTree-focus');
			]]></d:handler>

		</d:element>
	</d:namespace>
</d:tdl>